HP TOUCHPAD 


webOS Wireframe Stencil 


Stencil version 


2011 MARCH 28 | RELEASE v2 


WHAT IS THIS? 


The wireframe stencil kit does not represent 
the final visual styling of webOS UI 
components-- included are representative 
diagrams of the parts and pieces you can 
use to help you design your TouchPad 
application. 


The goal in creating this document was to 
illustrate most of the system or 
framework-level Ul components provided 
by webOS so that you can create better and 
faster wireframes. 


We also show some examples of how to mix 
and match these components to get you 
thinking about how to apply them in your 
application design. 


Please be aware that in a few cases, we are 
showing some custom UI controls and 
widgets that are not inherently part of the 
webOS framework. The webOS framework 
will continue to grow in scope, and more 
prebuilt framework elements will be 
available to you in the future! 


Please note this stencil kit is a work in 
progress, and parts of it may change when 
the system and framework elements are 
refined by HP. 


WHO IS THIS FOR? 


This stencil kit is meant to be used by 
designers that have an intermediate to 
advanced knowledge of how to use Adobe 
Illustrator CS5 or newer. 


Others can view this document to get a 
sense of the kinds of parts and pieces that 
are a part of the webOS system and 
framework. 
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FOR BEST RESULTS 


1. Install the Prelude font. 


2. Set your units to pixels. The UIl 
components in this stencil kit are built to 
approximate the pixel dimensions of the UI 
components on the HP Touchpad. For the 
highest fidelity results, try to work with 
integer pixel positions and sizes. 


3. Set your color space to RGB. 


4. |n your Layers panel, check the option 
for "Paste Remembers Layers". This will 
help you maintain a clear and consistent 
layer structure so you can select and lock 
objects more easily. 


5. Make symbols for objects you will reuse 
often. This will make it easier to maintain 
design changes and keep the filesize small. 


DOCUMENT VERSION HISTORY 


Release v1. 2011 March 14 


- Early access release 


Release v2. 2011 March 28 


- Beta SDK release 


ANNOTATIONS 


DOUBLE TAP 


PRESS & HOLD FLICK DOWN 


Gesture annotation references a screen ID 


COLOR SWATCHES 


SPREAD OUT 


PINCH IN 
© 


TAP FEEDBACK 


TYPE 


X-LARGE: PRELUDE 36PX, 40 PX LEADING 


Big black: Prelude Medium, Black 


LARGE TEXT: PRELUDE 20PX, 25 PX LEADING 


Large black bold: Prelude Bold, Black 
Large black: Prelude Medium, Black 
Large gray: Prelude Medium, Gray #4 


MEDIUM TEXT: PRELUDE 17PX, 20-OR-25 PX LEADING 


Medium black bold: Prelude Bold, Black 
Medium black: Prelude Medium, Black 
Medium gray: Prelude Medium, Gray #4 


SMALL TEXT: PRELUDE 14PX, 16-OR-20PX LEADING 


Small black bold: Prelude Bold, Black 
Small black: Prelude Medium, Black 
Small gray: Prelude Medium, Gray #4 


Small gray: Prelude Medium, Gray #3 


PLACEHOLDER COPY 


Lorem ipsum dolor sit amet. Duis ve elum. lbus ea doluptatur, is volupti busdam aper- 


cium esequam, vendam in reprorem rem dolorro voluptae ma et fugitata que omni- 
mint quatem aliquatius voluptatenis enisquia qui doluptus. 


Nequi volest, optate pori omnisquamus et aperibus et, iunt, apid que dolorepe 
sequunt ut amet que dolupic aboreped elenduc iiscit a ni corrum quiate parum volor- 
rum dusdae omnit, corere sed mosam, nonsequam faccus quo que pratempos mo 
optasim eturecum volest, exeri re velia pos intetus moloreium ut asped moluptat 
rehendu ntiusan istiam faciis nemporat. 


Icilis maxim arunt mo quodi simusam harisquia eum remolup itatia cum rerchiciis 
exerio et pa asime porro to blandite nis antiusam desed quaecti officil luptatem aut 
volupit, sequodipsae non corem harchicias eum lit vendipsam quia dolupta volecatque 
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GLYPHS & GRAPHICS 
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SYSTEM COMPONENTS 


App Name 


App Name < El 12:4 


Team Meeting 
ES Sam Hoang 


All Cleaned Out «4 | | >> 


Global App Menu Item 


Preferences 


Help 


Team Meeting 


STANDARD KEYBOARD HEIGHT, 350 px 
STANDARD KEYBOARD HEIGHT, 340 px 
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Select Select All Paste 


Select Select All | 


selected text 


Cut Copy Paste | 


HEADERS & FOOTERS 


APP w/ HEADER & FOOTER APP w/ HEADER ONLY 


HEADER 
FOR NAVIGATION 
& SCREEN TITLE 


CONTENT 


FOOTER 
FOR ACTIONS 
& CONTROLS 


APP w/ CUSTOM, TRANSIENT HEADER & FOOTER IN FULLSCREEN MODE 


FLOATING HEADER 
FOR NAVIGATION 
& SCREEN TITLE 


CONTENT 


FLOATING FOOTER 
FOR ACTIONS 
& CONTROLS 


CUSTOM, TRANSIENT HEADERS & FOOTERS 


Transient headers and footers usually appear temporarily above media content. They usually appear when you enter a fullscreen media experience and 
disappear after a time-out. They are shown again when the user taps the screen to reveal media controls and the floating header. 
Please note that Enyo does not currently support transient header or footer toolbars in the framework. These are custom components. 


Floating headers usually contain navigation: 


EXAMPLE CUSTOM FULLSCREEN PHOTO VIEWER 
Showing you what you are looking at and 
providing a means to return to the previous 


Canadian Rockies 10 of 107 p m (>; 


screen, usually containging a list or grid of 


other content. Floating headers might also 
contain action buttons or other controls. 


EXAMPLE CUSTOM VIDEO PLAYER CONTROLS 


Floating footers are generally for actions 
and controls related to the content you are 


44 || > 22 O 


consuming or editing. 


HEADER 

FOR NAVIGATION, 
SCREEN TITLE, 
ACTIONS, 

& CONTROLS 


CONTENT 


HEADERS 
(CAN BE FIXED OR SCROLLING) 


A. Fixed headers stay above scrolling lists, and do not move as you scroll. 
B. Scrolling headers scroll along with the content. 


1-LINE HEADER 


Label 


1-LINE HEADER w/ IMAGE & BADGE 


Label (23) 


HEADER w/ SEARCH FIELD 


2-LINE HEADER 


Big Label 
Small Label 


PANEL HEADER w/ GRAB HANDLE 
| | Label 


EXAMPLE HEADER w/ GRAPHICS 


^ | Arlene Snopes * 
(“22 | MegaCorp 


HEADER w/ TEXT NAVIGATION GROUP BUTTONS 


EM Label 2 x Label 3 


HEADER w/ IMAGE NAVIGATION GROUP BUTTONS 


% | x 


HEADER w/ TEXT FIELD 


TO: Name or contact info... nz 
PANEL HEADER w/ GRAB HANDLE & TEXT FIELD 
l| Name or contact info... BB 


PANEL HEADER w/ GRAB HANDLE & DROPDOWN 


Messenger v 


O Daniel Walsh 
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FOOTERS 


(USUALLY FIXED TO BOTTOM OF SCREEN) 


Footers usually contain action buttons and are usually fixed 
at the bottom of the screen. 


w/ DRAG HANDLE 


Toolbar component containing 
icon buttons and drag handle 


NO DRAG HANDLE 


Toolbar component containing 
icon buttons 


LIST ITEMS 


SCROLLING 


Note: None of the items 
below are currently supported 
in the Enyo framework. 


SUPERSCROLL 

Note: Adjust below to appropriate 
heights to account for UI height of 
your list area. 


Optional TOP or 
search icon: 

Use this if search/filter 
text input box is 
attached to top of the 
list 


Active anchor 


Inactive anchor 


GENERAL 
SCROLLING 


VERTICAL 


GENERAL SCROLLING 
INDICATOR: 
HORIZONTAL 


INDICATOR: 


LIST BACKGROUNDS 


DARK-COLORED LIST BACKGROUNDS 


LIST DIVIDERS 


LIST DIVIDER 


A ө---- Alpha divider 


DIVIDER TEXT HERE 


COLLAPSABLE LIST DIVIDER 


These are actually drawer componenents that are 
styled to look like list dividers. 


COLLAPSED DIVIDER 


р @——_ Collapsed 


EXPANDED DIVIDER 


we  — Expanded 


COLLAPSABLE DIVIDERS w/ ICON 


COLLAPSED DIVIDER » 
EXPANDED DIVIDER v 


GROUP BOXES 


LIST ITEMS GROUPBOX, 
NO HEADER 


BATTERY 


92% 


MEMORY 32 GB 
AVAILABLE 14.7 GB 


VERSION HP webOS 3.0 


SERIAL 


NUMBER P2523451010519716100 


LIST ITEMS GROUPBOX, 
w/ HEADER 


GROUP HEADER 


Text input hint text... 
SETTING Value 


е _ Divider w/ text label 


LIST EXAMPLES 


GENERIC LIST EXAMPLE, 
IMAGE, BADGING, STAR 


Selected List Item -23- Selected row 
Not Selected m d E Numbered badge 
Not Selected 


Not Selected w — Marked as favorite 


TASKS APP, TASK LISTS 


All Tasks Selected row 


Unfiled (1) ma Numbered badge 
Project Jabberwocky 

“1 
Ехспапде ie ШИШ Exchange account icon 


LIST OF CONTACTS 
A 


|» Adam Smith 
Generic contact image 

Ari Jaakse ell Favorite contact 
Company or title HP 


B 


2 Bob Barkley 


MESSAGING, CONVERSATIONS 
TODAY 


List divider —— e 


Generic contact image 9 Kenneth King 
=> |175 raining bananas 


Status indicator Nunya Sauce 
=> |’ll be there by noon-- Caeyous... —— — — Long message text 


is truncated 


LAST WEEK 
Хе — Favorite contact 


9 Tamara Thanh 
Indicator: You received => Miko and Fuzzy are dirty dogs 


this message 


о Drew Smith 
Indicator: You sent | need a new hobby too 


this message 


DRAWER INALIST 


n Carter Humphries a ee 
showing 


opened 
state 


[IM] cassius@gmail.com HOME 


Open drawer 


9 950 W. Maude Ave, Sunny... WORK 


Closed drawer ————e n Casey Jackson (» P} — 2. 
closed 
n Cassius Jones » | 


state 


ми _ Тар to mark as favorite 


EDITING LISTS 


SWIPE TO DELETE 


| ) Wash the dishes TODAY (ü) 


a Take the Fuzz out for 12/10/11 (i) 


a very long walk Taller row w/ 


wrapped text 


(МЎ вене јату — — (1) 


Cancel 


Ш Some other task (i) 


@ —— Row has been 
swiped 


Delete 


DRAGGING A LIST ITEM 


(| Wash the dishes TODAY (1) 


| | Some other task © 4 НА 


dragged between 
two other rows 


a very long walk 
(М Речененееіу- © 
EDIT MODE w/ DELETE & DRAG 


(CUSTOM LIST EDITING UI) 


E Wash the dishes 


TODAY —Be— — Drag handle 


ES Take the Fuzz out for 12/10/11 == 


a very long walk 


(“| Бе-генееееіу- = 


lp bua ES | Some other task = 


EDIT MODE w/ MULTI-SELECT 


Facebook о Attachment 


| ~ Reminder: Joe Smith invited you to јот Еа... 
Replied Hi, The following person invited you to join... 


Brenda Jones 


Check this out Selected row 


Tommy Bahama go 1/18/2011 


— Funny cat pictures 
Forwarded ———e 


Not selected 


Man, you gotta look at this. So wrong! 


Firstname Lastname 1/18/2011 


Subject appears here 
First line of the email appears here 


Sam Hogan 


Your thing is here 


Firstname Lastname 1/18/2011 


4 Subject appears here 


Flagged First line of the email appears here 
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EXAMPLE: ADDRESSING SUGGESTIONS LIST 


NOTHING TYPED 


ТО: | 


E 


CONTACT MATCHES DISPLAYED 


TO: Sa| nz 


Sam Hashe 


(999) 888-7777 


O shase AIM 

о shaseQ gmail.com STk . — 
Sam Hogan 

o samhogan AIM 

е samhogan@gmail.com GTALK 
Samantha Bergman 

sbergman@gmail.com GTALK 

CHAT USING... ии 


CONTACT SELECTED 


Tap to reveal 
alphabetical 
list of contacts 
to choose from 


List divider: Contact name 


Highlighted contact method 
(press return on keyboard 
to select) 


IM contact method 


App-specific 
custom list options 
added to end of 
suggestions list 


Once a contact method 
has been selected, this 
bubble appears around 
the name. Backspace 
once to select. Backspace 
when selected to delete. 


BUTTONS & FORMS 


SMALL SQUARE BUTTONS 


Dark Button 


Light Button 
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P) [>] x) .— collapsed 


> 
: 
< 
—| 
=< 
ОЈ 
C. 
= 
О 
2. 
сл 


Sign In 


5 > 

2 z 

= < 

О 2 

© E 

» ш 

С) О 
— 

= Pd 

ur = 

2 E 

А 

2 

Ғ.А 

A m 

AJ 


* Download for free 
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(888) 987-6543 MOBILE 


bb@yahoo.com 
benb@work.com 


SYNERGY ACCOUNTS 


> Microsoft Exchange 

samantha.berg@palm.com 

> Facebook 
seb75@cornell.edu 

Ж Google 
sberg75@gmail.com 


Editing screen 


Add Account Add account screen 


Add an account to access mail, contacts, 
calendar events and other content. 


Light Button, Disabled 


SQUARE GROUPED BUTTONS 


Light Action Button, Disabled 


ICON BUTTONS 


eee -- Up 


+ КА 
n = Down (Pressed) 
around the icon. 


e—— — Disabled 


DROPDOWN BUTTONS 


Google У 
Messenger v 


e For wireframe visualization only... 
It does not actually have a circle 


INTEGER PICKER 


RADIO GROUP BUTTONS 


Should be used for view switching or limited # of choices. 
Can be used for secondary navigation. 


SQUARE w/ TEXT LABELS 


Day 


SQUARE w/ IMAGE LABELS 


z es 


POPUP MENUS 


POPUP MENU FOR MORE ACTIONS 


DREWSMITH@GMAIL.COM 11/1/2010 


Set Due Date for А! 


Mark All Completed 


Mark All Incomplete 


Hide Completed 


Delete Completed Tasks 


POPUP MENU FOR 
CONTEXTUAL ACTIONS 


Highlighted item Delete Task List 


POPUP MENU FOR 
SELECTING AN OPTION 


Rename Task List 


Pressed EO 


Option 1 NAT Selected item 


em Other options 


| Option 2 


Option 3 


Disabled 


Menu item 


SETTING VALUES 


SLIDER CONTROL w/ FILL BAR 


Ringtone Volume 


c— 


ON/OFF SWITCH 
CHECKBOXES 


(wf Checked label 
a Unchecked label 
Not everything checked 


Disabled label 


DROPDOWN BUTTON 
w/ POPUP MENU 


My Order У 


My Order ““ Selected item 
Due Date el Other options 
Priority 


DROPDOWN BUTTON IN A HEADER 


O Daniel Walsh 


Messenger v 


LIST PICKER 


ENCRYPTION None Y 


DATE PICKER, EXAMPLE 1 
DATE PICKER, EXAMPLE 2 


2011 


SLIDER CONTROL, NO FILL BAR 


Setting Name 


(уз 


SLIDER CONTROL w/ TOOLTIP ON DRAG 


Page 50 


a= m 


EXAMPLE: CHECKBOXES USED IN GROUP BOXES 


[М GROUP PARTIALLY CHECKED 
м Checked item 


a Unchecked item 


м Checked item 


TEXTFIELD w/ SUGGESTIONS DROPDOWN 


Double date 


Double dragon 


Double rainbow 


POPUP MENU 


TIME PICKER, EXAMPLE 1 


TIME PICKER, EXAMPLE 2 


/ —n 

8 00 

9 15 AM 
10 30 PM 
11 45 

12 
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TEXT FIELDS 

SEARCH FIELD 

(Search 4) Not focused, nothing typed, hint text displayed 
(1 9)- Focused, nothing sped 


Double га! 


ХЫ» Focused, something typed 


Double rainbow Х) Focused, something typed 


SINGLE & MULTI-LINE TEXT FIELD STYLED w/ ROUNDED CORNERS 


ааа 


| Multi-line text field (focused) 


SINGLE TEXT FIELD INGROUP BOX 
w/ HEADER 


EMAIL ADDRESS 


TEXT FIELD IN LIST w/ NO STYLING 
| 


CUSTOM INLINE LIST EDITING, 
EXAMPLE 1 


GROUP HEADER 


TEXT FIELDS w/ OTHER CONTROLS 


Ени“ 
JI Ө Ж Item 2 
+ Add Item 
ML PEN 


GROUP HEADER 


— 


This is a very long message. | ат A 
showing you how this message 

wraps and grows the textfield in 
height, while its width is fixed. | 


TEXT FIELD w/ FIXED LABEL 


SETTING NAME 

+ Add Item 
VERY LONG 
SETTING NAME User-entered value 


CUSTOM INLINE LIST EDITING, 
EXAMPLE 2 


= New Phone Number... 


Tap button to add new text field 


x | 


Х (987) 654-3] 


= New Phone Number... 


TEXT FIELDS INSIDE GROUPBOX 


INCOMING MAIL SERVER 


OUTGOING MAIL SERVER 


Ж (987) 654-3210 


=-F New Phone Number... 
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POPUP EXAMPLES 


MESSAGE DIALOGS CUSTOM VISUAL DATE PICKER 


On the phone, these appear as popups above the content area 


«а Јију 2014 e 
DIALOG DIALOG DIALOG SUN MON TUE WED THU FRI 


SAT 
w/ STACKED ACTION BUTTONS w/ SIDE-BY-SIDE ACTION BUTTONS w/ SINGLE BUTTON ЕЕ E (7 ЕЗ FI |" 
| —— OTTO 
appears here. Big text 


Аге you sure you want їо delete Big text appears here. 


completed tasks in the current list? Big text 
Little text appears here. 10 || S 13 1: le i 
This cannot be undone. Small text БЕНЕН 
| cancel | alas 17| 181 9 20 2 23 
БЕБЕ шы 
Delete Completed Tasks | Primary action 


24 25 26 27 28 29 30 
Sep} Oct 
Secondary action 31 1 2 3 4 5 
JUL| AUG 


Date selected: July 21, 2011 


POPUP w/ TEXT ENTRY CUSTOM ADDRESS POPUP w/ MAP WIDGET 


On the phone, these may appear as popups above the content area 


9 161 Steuart St, San Francisco, CA 94105 9 161 Steuart St, San Francisco, CA 94105 


PASSWORD LOGIN PASION" 
n гә“ о о о.“ AL: <A 
Enter Wi-Fi password | Log in to your account | Fico Hotel Vitale ^ %% ~ % | 
let VO · DS oW AGE Open in Google Maps 

| Username... AS Boulevard" JA s We. S 

“є Get Directions 
СЕ 
| РУТ Add То Contacts 


Copy Address 


INTERACTIVE POPUPS 


On the phone, these usually appear as full-width scenes 


POPUP W/ FORM ELEMENTS LIST MENU ON TOP OF POPUP DATE PICKER W/ LIST MENU 
|) Variable height textfield w/ user- a Variable ће VER ^ Set due date 
entered text | entered te 
| Today 
PRIORITY Normal Y PRIORITY 
Tomorrow 
LIST Unfiled 7 LIST 
In one week 
DUE No due date Y 
Enter notes... Enter note In one month 


Done Done 


Highlighted row List menu 


SHARING / CONTACT PICKER 


SHARE DIALOG 


Initiate via app menu ... 
(shown below is a generic app menu) 


Bookmarks 


Share 


Help 


...Or initiate via share action 
(shown below is a generic action button 


ІІ ххх 


button 


E 


A.1. SHARE DIALOG 


Share With... 


Contact 
Email 


Instant Message or SMS 


Device 


Facebook 


Snapfish 


је 


e | > Launch the email app... 


е р Launch the messaging app... 
SMS option is not available if the 


Touchpad is not connected to the phone 


e— > Launch the 3rd party application to 
complete sharing flow 


B.1. CONTACT PICKER 


Select Contact 


Search Contacts 


Adam Smith 


Arlene Snopes 
MegaCorp 


2 Ben Button 


8 x Bob Barkley 


в. в. 


Cale SELECT DEVICE 


Select Device 


Sam's Pre 
HP Pre Plus 


Sam's Home Slate 
HP Touchpad 


+ Add Device 


B.2. FILTERED CONTACTS LIST 


Select Contact 


Arlene Snopes 
MegaCorp 


2 Snookie Snook ' 
2 Snow Plowers Inc 


NOTE: this popup might be shorter in landscape mode 
to account for keyboard height 


B.3. SELECT CONTACT METHOD 


Select Contact Method 


ry Arlene Snopes * 
4” MegaCorp 


arlene.snopes@gmalil.co... но 
asnopes@megacorp.com work 


56 (888) 987-6543 MOBILE 


(888) 345-6789 


Back 


Launch the Email app to COMPOSE view... 
This address will appear in the TO field. 
From there, you can add more recipients 
if needed. Whatever was being shared is 
either attached or in the message body. 


Launch the Messaging app in COMPOSE view... 
This contact will appear in the TO field. 
From there, you can add more recipients 
if needed. 


For the initial version of the Touchpad 
Messaging app, you cannot attach files. 

The text or link being shared is prepopulated 
in the message body. 


SMS option is not available if the 
Touchpad is not connected to the phone. 
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FILE PICKER (MULTI-SELECT) “ТВО 


А.1. TAP ATTACHMENT BUTTON 


(shown below is a generic attachment field) 


Disabled 
if there are 
Tap to no attachments 
add attachments 


B.1. ATTACHMENTS LISTED 


Expanded when 1 or more attachments 


є 3 files attached 
b2 2, 
Total 440 KB 
| Ax Image-0001.png х) 
таде 
Thumnail 20 
о и 
Document x Image-0005.png E 
Icon 121 KB 
X Image-0009.png 
103 KB 


Remove 
attachment 


C.1. ATTACHMENTS LIST UPDATED 


є 5 files attached 
^ | Total 5.9 MB 


Image-0001.png 
216 KB 


Image-0005.png 
121 KB 


Image-0009.png 
103 KB 


Song 2 
2.3 MB 


Song 3 
3.2 MB 


ја EQ са ES ка 
x) (х) (х) (xj (x) (4 


A.2. CHOOSE FILE TYPE 


Select Files No files selected 


Peto 
m 


Cancel 


Selected attachments do not persist 


B.2. CHOOSE FILE TYPE 


Select Files No files selected 


Photos 


Ringtones 
Documents 


C.2. CHOOSE FILE TYPE 


Select Files No files selected 


Proto 
m 


Cancel 


A.3. BROWSE ALBUMS 


Select Files No files selected 


Search Albums Q 


All Photos 


Screen Captures 


Family | | | 
шш 


B.3. SONGS LIST, SONG PREVIEW 


Wallpapers [23] 


A.4. BROWSE PHOTOS 


Select Files No files selected | 


| | MENS 


Tap anywhere on the thumbnail to select item... 


No large preview for multi-selected supported yet. 


Select Files 


B.4. SONGS SELECTED 


A.5. ITEMS SELECTED 


Select Files 3 files selected 


уа ES ES 
ES ES ES 
ES ES ра 


а 


No files selected | Select Files 


2 files selected 


Search Songs Q Search Songs Q 


-— | Song 2 
ap album art | Artist - Album 
to preview song 


(Play/Pause) 


| Song 1 
| Artist - Album 


Song 1 
Artist - Album 


01:24 Song 2 
Artist - Album 


| ү 


C.3. CHOOSE DOCUMENTS 


Select Files No files selected 


Search Documents Q 


File 1.doc 
12/31/10 


A very very long f . 
2/8/11 | 
P | 


52 KB 


me... pdf 
1.7 MB 


File 3.doc 
11/27/10 917 KB 


| | ЕЕ 


File 4.xls 
2/9/11 5.2 MB 


File 5.pdf 
1/20/11 52 KB 


C.4. DOCUMENT SELECTED 


Select Files No files selected 


Search Documents О, 


> File 1.doc 
12/31/10 52 KB 
> A very very long filename... pdf 

2/8/11 1.7 MB 
> File 3.doc 

11/27/10 917 KB 
> File 4.хі5 

2/9/11 5.2 MB 
> File 5.pdf 

1/20/11 52 KB 
<<) ШЕШЕ 


®—— Song not selected 


Song selected 


Song selected 
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FILE PICKER (SINGLE-SELECT) 


А.1. TAP ATTACHMENT BUTTON 


(shown below is a generic attachment field) 


+) 
Disabled 
if there are 
Tap to no attachments 


add attachments 


B.1. TAP BUTTON 


Edit Contact Photo b 


A.2. CHOOSE FILE TYPE 


Select File 


Peto 
m 


Cancel 


B.2. BROWSE ALBUMS 


Select File 


| 


All Photos 


Screen Captures 


Wallpapers 


Family 


Back 


A.3. BROWSE ALBUMS 


Select File 


All Photos 


Screen Captures 


Wallpapers 


Family 


B.3. BROWSE PHOTOS & VIDEOS 


Select File 


Back 


А.4. BROWSE PHOTOS & VIDEOS 


Select File 


Back 


B.4. CROP & SCALE IMAGE 


Scale and Crop Image 216 KB 


Back 


E 


A.5. IMAGE PREVIEW 


Img-0001.png 


Back 


216 KB 


A.6. ATTACHMENT LISTED 


e 1 file attached 
Total 440 KB 


Dd Image-0001.png 
216 KB 
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MEDIA PLAYBACK COMPONENTS 


Song Name 
Artist - Album 


Song Name 01:54 


Web v => |] 12:42 У 


Song Мате 01:24 


€ = media.kcrw.com/live/kcrwlive.pls © (2 (5 A 
Artist - Album -04:40 


This Song Is Not Playing 
Artist - Album 


Filename or video title | Done | 


Exit fullscreen 
or return to 
previous screen 
before entering 
fullscreen video 


This Song Is Not Playing 
Artist - Album 


- 
Б 
«У 


Song Мате 


Streaming ... 


Maximize video 
to fill up screen 


|. STANDARD KEYBOARD HEIGHT, 340 px 


Play progress Buffered in memory Downloaded 


а 1l @! 


- STANDARD KEYBOARD HEIGHT, 350 px 
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SLIDING PANES - PORTRAIT 


ITEM IN 1ST PANE SELECTED, NOTHING SELECTED IN 2ND PANE 2-PANE VIEW 2.5-PANE VIEW 


App Name wv < m 12:42 У Арр Мате «=> El 12:42 y I El 12:42 y 


Pane 1 Title Pane 2 Title Pane 2 Title 


хх хх хш хх хх 
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SLIDING PANES - LANDSCAPE 


ITEM IN 1ST PANE SELECTED, NOTHING SELECTED IN 2ND PANE 2-PANE VIEW 


App Name ЖЫ 12:42 v 


Pane 2 Title Pane 3 Title 


App Name ЖЫ 12:42 У 


Pane 1 Title Pane 2 Title 


EE | d 


ХІ ХІХ ХХ хх хх ІШ Хх са са сји 


3-PANE VIEW DETAIL PANE VIEW 


App Name У = m 12:42 W 


Pane 3 Title 


App Name = a 12:42 v 


Pane 1 Title Panel 2 Title Pane 3 Title 


ХХХ x} x} II ххх хш ххх ES Ш 
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SPLIT-VIEW (NOT SLIDING PANES) 


SPLIT-VIEW, FULL WIDTH PANE SPLIT-VIEW, SEPARATED PANE SPLIT-VIEW, SEPARATED PANE, LANDSCAPE 


ЖЫ 12:42 v 


App Name v “> [a 12:42 У У = Ы 12:42 У Арр Мате УУ 


B 
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FULL-WIDTH LAYOUTS 


WITH HEADER & FOOTER WITH HEADER ONLY 


App Name У - Іш 12:42 4 


“ва | Tite 
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WIREFRAME EXAMPLE: EMAIL APP (PANELS NAVIGATION) 


a1. Email app default view, portrait a2. Email list item selected - automatic transition 
to 2-pane view. 


a3. 2.5-pane view 


Email 


FAVORITES 


All Inboxes | (2 | Jan 19, 
capu | | то? Ronron 
Yahoo! 


Exchange 
Brenda Jones ^s ONG: тео: 


Friends & Family — Check this out http://www.w 


OMG. Too funny: http://www.wastingtime... 


Email = Email wv 


FAVORITES All Inboxes All Inboxes | € | Brenda Jones 


All Inboxes Е | Јап 19, 2011 9:32 АМ Mark unread 


Ea @gmail | 
. | TO | Ronron@yahoo.com; mrtOgmail.com; colsan... 
ema VF TODAY TODAY E ы 9 


ҒА D 12:34 РМ Ж 12:34PM / \ 
Үаһоо! (1 Facebook ; Facebook өсне аш | < 


Reminder: Joe Smith invited you to join Fa... Reminder: Joe Smith invited you to join Fa... 


Erango w OMG. Too funny: 


Brenda Jones 2:32 AM Brenda Jones 9:32 AM 
Friends & Family Check this out — Check this out 


00 ft OMG. Too funny: http://www.wastingtime... 
ACCOUNTS Lorem ipsum dolor sit amet. Duis ve elum. Ibus ea 


А : 7:59 AM : А . 
У Firstname Lastna Firstname Lastname doluptatur, is volupti busdam apercium esequam, 
x Gmail 


Subject appears here | | Subject appears here 
Inbox 
Sent 
Drafts 
Outbox 
Accounts 
Friends & Family 
Travel 

Yahoo! 

Exchange 


TODAY 


Facebook атм 
Reminder: Joe Smith invited you to join Fa... 


Check this out 


http://www.wastingtimeontheinternet.com/ 


ACCOUNTS 


Gmail 
Inbox 
Sent 
Drafts 
Outbox 
Accounts 
Friends €: Family 
Travel 
Yahoo! 
Exchange 


Lorem ipsum 
Firstname Lastname 7:59 АМ 
Subject appears here 


doluptatur, is 


vendam in reprorem rem dolorro voluptae ma et vendam in reg 


fugitata que omnimint quatem aliquatius voluptate- fugitata que o 


1/18/2011 | 1/18/2011 nis enisquia qui doluptus. 1/18/2011 nis enisquia q 


Tommy Bahama 72 1/18/2011 
Funny cat pictures 


Tommy Bahama 77 1/18/2011 Tommy Bahama 2 1/18/2011 
Funny cat pictures Funny cat pictures Nequi volest, optate pori omnisquamus et aperibus 


et, iunt, apid que dolorepe sequunt ut amet que do- 


lupic aboreped elenduc iiscit a ni corrum quiate Firstname Lastname 1/18/2011 


Subject appears here 


Firstname Lastname — 1/18/2011 Firstname Lastname 1/18/2011 | 
Subject appears here Subject appears here parum volorrum dusdae omnit, corere sed mosam, 


nonsequam faccus quo que pratempos mo optasim nonsequam fa 


eturecum volest, exeri re velia pos intetus moloreium eturecum vole 


Sam Hogan 
Your thing is here 


Sam Hogan p Sam Hogan 


Your thing is here Your thing is here ut asped mol 


ut asped moluptat rehendu ntiusan istiam faciis nem- 


porat. porat. 


Firstname Lastname 


Firstname Lastname Е Firstname Lastname 4 Duis ve elum. Lorem ipsum dolor sit amet. 
Subject appears here 


Subject appears here Subject appears here 


Duis ve elum. 


-Brenda -Brenda 


Firstname Lastname 
Subject appears here 


Firstname Lastname 18/2011 Firstname Lastname 
Subject appears here ^ Subject appears here 


[У] (У # |ж +» 5: |» |» |» с 


(z 
Ox 
Ж 
* 
* 
Ж 
ж 
* 
B 
B 


Firstname Lastname 
Subject appears here 


Firstname Lastname На Firstname Lastname 
Subject appears here Subject appears here 


Firstname Lastname 
Subject appears here 


O X MI K 


Firstname Lastname ii Firstname Lastname 
Subject appears here Subject appears here 


+ о vo 


Slide either pane to the right Slide email list pane 


Accounts & folders pane Email list pane Blank portion of 
af to reveal the accounts & folders pane. to the left to reveal 
email list pane, fih | 
since no email has d iniu me emal 
detail pane 


been selected 


a4. Email app default view, landscape 


Email wv 


ра 
All Inboxes (10^ 


E (5) TODAY No email selected 
Yahoo! (1) Facebook 2 12:34PM 


* Reminder: Joe Smith invited you to join Fa... 


Exchange (4) Hi, The following person invited you to join 


Brenda Jones 9:32 AM 


Friends & Family > Check this out 


ACCOUNTS 


Firstname Lastna 


Gmail Subject appears here 


Inbox (3) 1/18/2011 
I | 2) 1/18/2011 


Тотту Ваһата 4 
Sent Tommy, 
unny cat pictures 


Drafts | 
| Firstname Lastname 1/18/2011 
Subject appears here 
Outbox = Е P» ЕЕЕ 
Accounts Sam Hogan 


Your thing is here 
| , knn 


Friends & Family Just wanted to let you | 


Firstname Lastname 


a5. Email list item selected 


Email 


FAVORITES 


| © | Brenda Jones 
All Inboxes (10) ФӘ | Jan 19,2011 9:32 AM Mark unread 


Gmail 
Yahoo! 


Exchange Q 
| - Brenda Jones 
Friends & Family — Check this out 


OMG. Too funny: http://www.wastingtime... 


( Q4) 
9? Ronron@yahoo.com; mrt@gmail.co... 


> Topay 


Facebook Gee 
\ Reminder: Joe Smith invited you to join Fa... 


Check this out 


OMG. Too funny: 
http://www.wastingtimeontheinternet.com/ 


Lorem ipsum dolor sit amet. Duis ve elum. 


= Firstname Lastname 7:59 АМ 
Subject appears here 


[bus ea doluptatur, is volupti busdam aper- 
cium esequam, vendam in reprorem rem 


rirst ine от tne ema | appears nere 


dolorro voluptae ma et fugitata que omni- 


1/18/2011 mint quatem aliquatius voluptatenis enisquia 


Tommy Bahama Ж 1118/2011 qui doluptus. 


Funny cat pictures 


Nequi volest, optate pori omnisquamus et 


aperibus et, iunt, apid que dolorepe sequunt 


Firstname Lastname 1/18/2011 
Subject appears here 


ut amet que dolupic aboreped elenduc iiscit 


a ni corrum quiate parum volorrum dusdae 


omnit, corere sed mosam, nonsequam 


Sam Hogan 


Your thing is here faccus quo que pratempos mo optasim etu- 


recum volest, exeri re velia pos intetus mol- 


Just wanted to let you know. You should 


oreium ut asped moluptat rehendu ntiusan 


Firstname Lastname istiam faciis nemporat. 


ubiect appears here 


аб. 2-pane view 


Email wv 


All Inboxes 


TODAY 


Facebook С НИ 
“5 Reminder: Joe Smith invited you їо join Fa... 


Brenda Jones 
— Check this out 


OMG. Too funny: http://www.wastingtime... 


Firstname Lastname 
Subject appears here 
! d S | a] = OT ai. е n = а fi ге = cre sara 


1/18/2011 


Tommy Bahama / 1/18/2011 


' Funny cat pictures 
[> 


ап, you gotta look at this. 30 wrong 


Firstname Lastname 1/18/2011 


| Subject appears here 


Sam Hogan 


Your thing is here 


Firstname Lastname 


Brenda Jones 
J Jan 19, 2011 9:32 AM 


N 


Brenda Jones 
J Jan 19, 2011 9:32 AM Mark unread 


TO | Ronron@yahoo.com; mrt@gmail.com; colsanders@chickychicky.com; bigb@big... 


Check this out | 4 


OMG. Too funny: 
http://www.wastingtimeontheinternet.com/ 


Lorem ipsum dolor sit amet. Duis ve elum. Ibus ea doluptatur, is volupti busdam 
apercium esequam, vendam in reprorem rem dolorro voluptae ma et fugitata que 
omnimint quatem aliquatius voluptatenis enisquia qui doluptus. 


Nequi volest, optate pori omnisquamus et aperibus et, iunt, apid que dolorepe 
sequunt ut amet que dolupic aboreped elenduc iiscit a ni corrum quiate parum 
volorrum dusdae omnit, corere sed mosam, nonsequam faccus quo que pratempos 
mo optasim eturecum volest, exeri re velia pos intetus moloreium ut asped moluptat 
rehendu ntiusan istiam faciis nemporat. 


Duis ve elum. Lorem ipsum dolor sit amet. 


-Brenda 


Mark unread 


TO | Ronron@yahoo.com; mrt@gmail.com; colsandersOchickychicky.com; bigb@bigb.com; someone@email.com; davesmith... 


Check this out 


OMG. Too funny: 


http://www.wastingtimeontheinternet.com/ 


Lorem ipsum dolor sit amet. Duis ve elum. Ibus ea doluptatur, is volupti busdam apercium esequam, vendam in reprorem rem 


dolorro voluptae ma et fugitata que omnimint quatem aliquatius voluptatenis enisquia qui doluptus. 


Nequi volest, optate pori omnisquamus et aperibus et, iunt, apid que dolorepe sequunt ut amet que dolupic aboreped elenduc 


liscit a ni corrum quiate parum volorrum dusdae omnit, corere sed mosam, nonsequam faccus quo que pratempos mo optasim 


eturecum volest, exeri re velia pos intetus moloreium ut asped moluptat rehendu ntiusan istiam faciis nemporat. 


Duis ve elum. Lorem ipsum dolor sit amet. 


-Brenda 
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WIREFRAME EXAMPLE: TASKS APP (SPLIT-VIEW, NOT PANELS) 


b1. Tasks app, portrait, showing swipe to delete b2. Tasks app, portrait, adding new task b3. Tasks app, portrait, edit mode 


= [a 12:42 У 


wv 


10 incomplete 10 incomplete 
_____- (€ 
All Tasks Wash the dishes i а leet TORT Ра ; All Tasks Wash the dishes 

М 


All Tasks 


| Му Огаег 
10 incomplete 


Unfiled a Take the Fuzz out for a very long i i C) Some other task : ES Unfiled Take the Fuzz out for a very long 
walk 
Project Jabberwocky Project Jabberwocky B Do timesheet i Project Jabberwocky 
(4 Betheteunelry = =—_ | 
Dog chores Dog chores C) Get window cleaning quotes i [>< | Dog chores 
Y AR 000 0 
Exchange Exchange C) Sweep ; Exchange 
a Some other task i E3 Some other task 
a Buy flowers i 
( | Do timesheet i ES Do timesheet 
a Get hair appointment 
a Get window cleaning quotes i [>< | Get window cleaning quotes 


a Pick up prescription 


a Sweep i 


|) Buy flowers i 


|) Wash the dogs 


OI 


|) Get hair appointment i ЕЗ Get hair appointment 
( | Pick up prescription i E3 Pick up prescription 
MÀ ПШПШ | ј" |" [ој] ' јој" = — 
= I 
. "КАЈ ЈК 
Тар veil "m BEEN Б m Delete or rearrange lists and tasks 


== 


The Tasks app presents two Tapping the “New Task” icon, the keyboard slides up, and since the new task appears In this edit mode, all the buttons along the bottom edge are replaced by an 
side-by-side lists. Selecting at the bottom of the task list, the list is shifted upwards so the textfield is in focus above instruction and a Done button. Visible drag handles and delete buttons also 
an item on the left list the keyboard. In this case, typing a task name then tapping return creates a new task, appear on editable list items. 

refreshes the right side list and the list would shift upwards again so the new task would appear above the keyboard. 


of tasks. 


b4. Actions menu 


4 Set Due Date for All 
Mark All Completed 


Mark All Incomplete 


4 Hide Completed | 

_ Delete Completed Tasks L Tap outside 
the menu 

_ Delete Task List | to close de 
w/o making 
a selection. 


Rename Task List 


zz 
2 


с? 
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WIREFRAME EXAMPLE: MEMOS APP (FULL-WIDTH LAYOUT w/ REFLOWABLE GRID) 


c1. Memos app, portrait, memos grid view c3. Memos app, portrait, create new memo c5. Memos app, portrait, memo detail view 


Memos 


10 Memos Search Memos О, 


If you tap on а memo from the grid, you 
will see the memo detail view. Tap 
anywhere in this memo to reveal the 
keyboard so you can edit this memo. 
Tap anywhere on the scrim or on the 
button labeled “Memos” to return to 
the grid of memos. 


The preview text for Lorem ipsum 
each memo is Dolor sit amet 
displayed here Duis ve elum 


Some memo text Some more memo These memos are 
text different colors 


The text box is is the same size in portrait 
or landscape views. The memos text can 
extend below the fold of this text box. You 
will see the text automatically move up as 
you type near the bottom. This way, the 
keyboard will not hide the text you are 
typing as you type below the keyboard. 


Tapping the + pad When the text in the These memo graphics 
at the top of this grid memo gets very long, are rotated slightly 
creates anew memo the memo preview 

will only display 
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a certain number of 


STANDARD KEYBOARD HEIGHT, 340 px 


characters in this grid 
view. Tap to see more. 


D = 
The spacing of the When you rotate the 
memos grid forces device, the memos / / 
the grid to be cut off grid will reflow. You 4 2 Х е M N M , , + 
in either portrait or will see 3 columns of 


landscape. memos in portrait or 
4 columns of memos 
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STANDARD KEYBOARD HEIGHT, 340 px 
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c2. Memos app, landscape, memos grid view c4. Memos app, landscape, create new memo 
(50% scale) (50% scale) 


Tapping the + pad When the text in the 
at the top of this grid memo gets very long, 
creates a new memo the memo preview 
will only display 
ac 


EN 
These memo graphics e spacing of the en 
e grid to be cut o i d 
in either portrait or 


